<template>

    <div>

        <div class="chain-link-bar-wrapper">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item to="/activityRecommendList">推荐配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>


        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>推荐配置</span>
            </div>
            <div class="app-diliver-15"></div>
            <div>
                <div class="app-display-inline app-margin-h-20">
                    <span class="color-black-second font-size-text">关键字：</span>
                    <el-input
                            clearable
                            placeholder="活动名、活动内容"
                            v-model="page.keyWord"
                            style="width: 380px;"
                    ></el-input>
                </div>

                <div class="app-display-inline app-margin-h-20">
                    <SubmitButton
                            type="primary"
                            plain
                            icon="el-icon-search"
                            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
                    >搜索
                    </SubmitButton>
                </div>
            </div>

            <div class="app-diliver-15"></div>
            <div class="app-diliver-15"></div>

            <el-table :data="activityList" stripe border @sort-change="sortMethod" style="width: 100%"
                      class="nc-table-btn-ctrl">
                <el-table-column type="index" :index="indexMethod">
                </el-table-column>

                <el-table-column
                        label="活动介绍"
                        width="300">
                    <template slot-scope="scope">
                        <span>{{scope.row.title}}</span>
                        <span v-if="scope.row.tag != null">&nbsp;|&nbsp;{{scope.row.tag}}</span>
                        <br>
                        <span>{{scope.row.content}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="最大人数"
                        width="200">
                    <template slot-scope="scope">
                        <!-- <span>{{scope.row.people_min_number}}</span>
                         ~-->
                        <span>{{scope.row.people_max_number}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="有效日期" prop="end_date_time">
                    <template slot-scope="scope">
                        <span>{{scope.row.start_date_time}}</span>
                        <br>~<br>
                        <span>{{scope.row.end_date_time}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="发布日期" prop="create_date_time"><!--sortable="custom"-->
                </el-table-column>

                <el-table-column label="是否推荐|审核|有效状态" prop="check_status">
                    <template slot-scope="scope">
                        <span v-if="scope.row.recommend == null || scope.row.recommend == 0" class="text-bold color-warning">未推荐</span>
                        <span v-if="scope.row.recommend == 1" class="text-bold color-success">推荐</span>
                        &nbsp;|&nbsp;
                        <span class="text-bold color-success">通过</span>
                        &nbsp;|&nbsp;
                        <span class="text-bold color-success">未开始</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作">
                    <template slot-scope="scope">

                        <NcButton
                                v-if="scope.row.recommend == null || scope.row.recommend == 0"
                                size="mini"
                                type="success"
                                :post-option="{url: settingRecommendUrl, callback: getPage, confirm: '确定要将该活动设置为推荐吗？', data: {id: scope.row.id} }"
                                class="app-margin-l-10 app-margin-v-5"
                        >设置为推荐
                        </NcButton>
                        <NcButton
                                v-if="scope.row.recommend == 1"
                                size="mini"
                                type="warning"
                                :post-option="{url: cancelRecommendUrl, callback: getPage, confirm: '确定要取消该活动的推荐吗？', data: {id: scope.row.id} }"
                                class="app-margin-l-10 app-margin-v-5"
                        >取消推荐
                        </NcButton>
                        <a class="" :href="'#/activity/detail/' + scope.row.id" target="_blank">
                            <el-button
                                    plain
                                    size="mini"
                            >详情
                            </el-button>
                        </a>
                    </template>
                </el-table-column>
            </el-table>


            <div class="pager-bar-wrapper">
                <el-pagination
                        background
                        layout="prev, pager, next, total"
                        :total="page.totalRow"
                        :page-size="page.pageSize"
                        :current-page="page.pageNum"
                        @current-change="pageNumChange"
                        @prev-click="pageNumChange"
                        @next-click="pageNumChange"
                        @size-change="pageSizeChange"
                >
                </el-pagination>
            </div>

        </el-card>
    </div>

</template>

<script>
    import NcButton from '../common/NcButton';
    import SubmitButton from '../common/SubmitButton';

    import Api from '../../api/Api';
    import ActivityApi from '../../api/ActivityApi';

    import JsonKit from '../../kit/JsonKit';

    import {mapGetters} from 'vuex';
    //需要导入vuex的数据管理
    import Store from '../../store/index.js'

    export default {
        components: {
            NcButton,
            SubmitButton
        },
        data() {
            return {
                activityList: [],

                page: {
                    checkStatus: '',
                    keyWord: '',
                    columnProp: '',
                    columnOrder: '',
                    pageNum: 1,
                    pageSize: 10
                },
                checkStatusEditVisible: false,
                checkYes: 0,
                editActivity: {},
                searchUrl: ActivityApi.URL_RECOMMEND_LIST,
                settingRecommendUrl: ActivityApi.URL_SETTING_RECOMMEND,
                cancelRecommendUrl: ActivityApi.URL_CANCEL_RECOMMEND,
                role: 0
            };
        },
        computed: {
            ...mapGetters(['hasPerm'])
        },
        created() {
            this.getPage();
            this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
            this.role = Store.state.user.role;
        },
        beforeDestroy: function () {
            this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
        },
        methods: {
            sortMethod(column) {
                this.page.columnProp = column.prop;
                this.page.columnOrder = column.order;
                this.getPage();
            },
            searchCB(json) {
                this.activityList = json.list;
                this.setPage(json);
            },
            getPage() {
                ActivityApi.recommendList(this.page, json => {
                    this.activityList = json.list;
                    this.setPage(json);
                });
            },
            pageNumChange(pageNum) {
                this.page.pageNum = pageNum;
                this.getPage();
            },
            pageSizeChange(pageSize) {
                this.page.pageSize = pageSize;
                this.getPage();
            },
            setPage(json) {
                this.page.pageNum = json.pageNum;
                this.page.pageSize = json.pageSize;
                this.page.totalRow = json.totalRow;
            },
            indexMethod(index) {
                return index + 1 + (this.page.pageNum - 1) * this.page.pageSize;
            },
            selectTabStatus(checkStatus) {
                this.page.checkStatus = checkStatus;
                this.page.pageNum = 1;
                this.getPage();
            },
            checkStatusHandle(activityId, checkYes) {
                this.editActivity = JsonKit.getOf(this.activityList, 'id', activityId, null);
                this.checkYes = checkYes;
                this.checkStatusEditVisible = true;
            },
            hideEditDialog(isSuccess) {
                this.checkStatusEditVisible = false;
                this.editActivity = {};

                if (isSuccess) {
                    this.getPage();
                }
            }
        }
    };
</script>
